<template>
    <view class="wrap">
        <camera class="camera" v-if="showCamera" device-position="front" resolution="low" flash="off" frame-size="large" @error="refuse" @initdone="initdone">
            <cover-view class="bgmask" >
                <cover-view class="title">请把脸移入取景框内</cover-view>
                <cover-image class="circle" src="@/pages/indexPages/static/facePicking/circle.png"></cover-image>
                <cover-image class="circle-line" src="@/pages/indexPages/static/facePicking/line.gif"></cover-image>
                <cover-view class="btn" @click="timeEnd" v-if="!isTimeEnd">确认({{ time }})</cover-view>
                <cover-view class="btn disable" v-else>上传中......</cover-view>
                <cover-view class="bg"></cover-view>
            </cover-view>
        </camera>
    </view>
</template>

<script>
import { uploadFile } from '@/common/utils.js';
export default {
    data() {
        return {
            showCamera: true,
            countDownTime: 4,
            time: 3,
            isTimeEnd: false,
            endTime: '',
            flag: false,
            timer: '',
            scopeCamera: false
        };
    },
    mounted() {},
    created() {},
    async onShow() {
        this.$u.vuex('vuex_enterFacePageTimes', this.vuex_enterFacePageTimes + 1);
        const setting = await this.$uniPromise.getSetting();
        if(setting.authSetting['scope.camera']){
            this.scopeCamera = true;
            console.log(1234);
            this.init();
            this.startCountDown();
        }else if(setting.authSetting['scope.camera']===false){
            console.log(5678);
            uni.navigateBack({});
        }
    },
    onHide() {
        this.showCamera = false;
    },
    methods: {
        // 初始化数据
        init() {
            this.showCamera = true;
            this.time = 3;
            this.isTimeEnd = false;
        },
        // 开始倒计时
        startCountDown() {
            this.endTime = new Date().getTime() + this.countDownTime * 1000;
            this.timeDown();
            this.timer = setInterval(() => {
                if (this.flag) {
                    clearInterval(this.timer);
                    return;
                }
                this.timeDown();
            }, 1000);
        },
        // 计时
        timeDown() {
            const endTime = new Date(this.endTime);
            const nowTime = new Date();
            let leftTime = parseInt((endTime.getTime() - nowTime.getTime() - 10) / 1000);
            let s = parseInt(leftTime % 60);
            if (leftTime <= 0) {
                this.flag = true;
                this.timeEnd();
            } else {
                this.time = s;
            }
        },
        // 倒计时结束
        timeEnd() {
            this.flag = true;
            this.isTimeEnd = true;
            this.surePick();
        },
        // 拒绝摄像头权限
        refuse() {
            uni.navigateBack({});
            this.showCamera = false;
        },
        // 相机初始化完成时
        initdone() {
            if (!this.scopeCamera) {
                this.init();
                this.startCountDown();
            }
        },
        // 拍照
        async surePick() {
            const tempImagePath = await this.$uniPromise.takePhoto()
            this.uploadFile(tempImagePath);
        },
        // 上传文件
        uploadFile(file) {
            uploadFile(`${this.$config.baseUrl}/api/tourist/v2/photo/sreach`, file, this.$config.tokenKey, {
                userid: this.vuex_userId
            },false)
                .then(data => {
                    console.log(data);
                    this.findResult(data);
                })
                .catch(() => {
                    this.findResult();
                });
        },
        // 跳转查找结果页面
        findResult(data) {
            if (data && data.Data && data.Data.length > 0) {
				console.log(data.Data)
                let list = data.Data.map(item => {
                    item.isSelected = false;
                    return item;
                });
                this.$u.vuex('vuex_searchResultsList', list);
            } else {
                this.$u.vuex('vuex_searchResultsList', []);
            }
            uni.navigateTo({
                url: '/pages/indexPages/searchResults/searchResults',
                success: () => {
                    clearInterval(this.timer);
                    this.flag = false;
                }
            });
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.flag = false;
    },
};
</script>

<style lang="less" scoped>
.wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .camera {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .camera-wrap {
        position: relative;
        left: 0;
        top: 0;
        width: 500rpx;
        height: 500rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 100%;
    }

    .bgmask {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
        .title {
            position: absolute;
            left: 0;
            top: 70rpx;
            width: 100%;
            font-size: 36rpx;
            color: #ffffff;
            text-align: center;
            z-index: 110;
        }
        .circle-line {
            position: absolute;
            left: 0;
            top: 117rpx;
            width: 750rpx;
            height: 750rpx;
            z-index: 105;
        }
        .circle {
            position: relative;
            width: 750rpx;
            height: 862rpx;
            z-index: 100;
        }
        .btn {
            position: absolute;
            left: 75rpx;
            top: 1020rpx;
            width: 600rpx;
            height: 86rpx;
            background: #5ad25c;
            border-radius: 10rpx;
            z-index: 120;
            text-align: center;
            color: #ffffff;
            line-height: 86rpx;
            font-size: 30rpx;
        }
        .disable{
            background: #ccc;
        }
        .bg {
            position: absolute;
            width: 100%;
            height: calc(100vh - 862rpx);
            left: 0;
            top: 862rpx;
            background: rgba(0, 0, 0, 0.7);
        }
    }
}


</style>
